{% extends "base.html" %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex align-items-center mb-4">
        <div class="d-flex align-items-center">
            <i class="fas fa-chart-bar me-2 text-primary" style="font-size: 24px;"></i>
            <h2 class="mb-0">个人画像及组织分析对比</h2>
        </div>
        <div class="ms-auto">
            <button class="btn btn-primary" onclick="refreshData()">
                <i class="fas fa-sync-alt me-1"></i>刷新数据
            </button>
        </div>
    </div>

    <!-- 组织数据对比 -->
    <div class="card mb-4">
        <div class="card-header d-flex align-items-center">
            <h5 class="mb-0">
                <i class="fas fa-building me-2"></i>组织画像数据对比
            </h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th style="width: 20%">字段名称</th>
                            <th style="width: 25%">页面值</th>
                            <th style="width: 25%">数据库值</th>
                            <th style="width: 15%">差异状态</th>
                            <th style="width: 15%">操作</th>
                        </tr>
                    </thead>
                    <tbody id="orgCompareResult">
                        <!-- 组织数据对比结果将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 员工数据对比 -->
    <div class="card">
        <div class="card-header d-flex align-items-center">
            <h5 class="mb-0">
                <i class="fas fa-users me-2"></i>人才画像数据对比
            </h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th style="width: 15%">员工姓名</th>
                            <th style="width: 15%">字段名称</th>
                            <th style="width: 20%">页面值</th>
                            <th style="width: 20%">数据库值</th>
                            <th style="width: 15%">差异状态</th>
                            <th style="width: 15%">操作</th>
                        </tr>
                    </thead>
                    <tbody id="empCompareResult">
                        <!-- 员工数据对比结果将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 差异详情模态框 -->
<div class="modal fade" id="diffDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-info-circle me-2"></i>差异详情
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card border-primary h-100">
                            <div class="card-header bg-primary text-white">
                                <i class="fas fa-globe me-2"></i>数据位置
                            </div>
                            <div class="card-body">
                                <p id="diffLocation" class="mb-0"></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border-success h-100">
                            <div class="card-header bg-success text-white">
                                <i class="fas fa-database me-2"></i>数据库信息
                            </div>
                            <div class="card-body">
                                <p id="diffDatabase" class="mb-0"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card border-info mb-4">
                    <div class="card-header bg-info text-white">
                        <i class="fas fa-tag me-2"></i>字段信息
                    </div>
                    <div class="card-body">
                        <p id="diffField" class="mb-0"></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-header bg-light">
                                <i class="fas fa-file-alt me-2"></i>页面值
                            </div>
                            <div class="card-body">
                                <p id="diffPageValue" class="mb-0"></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-header bg-light">
                                <i class="fas fa-database me-2"></i>数据库值
                            </div>
                            <div class="card-body">
                                <p id="diffDbValue" class="mb-0"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    loadComparisonData();
});

function refreshData() {
    const refreshBtn = document.querySelector('.btn-primary');
    refreshBtn.disabled = true;
    refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>刷新中...';
    
    loadComparisonData().finally(() => {
        refreshBtn.disabled = false;
        refreshBtn.innerHTML = '<i class="fas fa-sync-alt me-1"></i>刷新数据';
    });
}

async function loadComparisonData() {
    try {
        // 加载组织数据对比
        const orgResponse = await fetch('/talent/api/compare/organization');
        const orgData = await orgResponse.json();
        const tbody = document.getElementById('orgCompareResult');
        tbody.innerHTML = orgData.differences.map(diff => {
            const isDifferent = diff.page_value.trim() !== diff.db_value.trim();
            return `
                <tr>
                    <td>
                        <i class="fas fa-${getFieldIcon(diff.field)} me-2 text-muted"></i>
                        ${diff.field}
                    </td>
                    <td class="text-break">${formatValue(diff.page_value)}</td>
                    <td class="text-break">${formatValue(diff.db_value)}</td>
                    <td>
                        <span class="badge ${isDifferent ? 'bg-warning' : 'bg-success'}">
                            <i class="fas fa-${isDifferent ? 'exclamation-triangle' : 'check'} me-1"></i>
                            ${isDifferent ? '不一致' : '一致'}
                        </span>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-info" onclick='showDiffDetail(${JSON.stringify(diff)})'>
                            <i class="fas fa-search me-1"></i>查看详情
                        </button>
                    </td>
                </tr>
            `;
        }).join('');

        // 加载员工数据对比
        const empResponse = await fetch('/talent/api/compare/employees');
        const empData = await empResponse.json();
        const empTbody = document.getElementById('empCompareResult');
        empTbody.innerHTML = empData.differences.map(diff => {
            const isDifferent = diff.page_value.trim() !== diff.db_value.trim();
            return `
                <tr>
                    <td>
                        <i class="fas fa-user me-2 text-muted"></i>
                        ${diff.employee}
                    </td>
                    <td>
                        <i class="fas fa-${getFieldIcon(diff.field)} me-2 text-muted"></i>
                        ${diff.field}
                    </td>
                    <td class="text-break">${formatValue(diff.page_value)}</td>
                    <td class="text-break">${formatValue(diff.db_value)}</td>
                    <td>
                        <span class="badge ${isDifferent ? 'bg-warning' : 'bg-success'}">
                            <i class="fas fa-${isDifferent ? 'exclamation-triangle' : 'check'} me-1"></i>
                            ${isDifferent ? '不一致' : '一致'}
                        </span>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-info" onclick='showDiffDetail(${JSON.stringify(diff)})'>
                            <i class="fas fa-search me-1"></i>查看详情
                        </button>
                    </td>
                </tr>
            `;
        }).join('');
    } catch (error) {
        console.error('加载数据失败:', error);
        showToast('加载数据失败，请稍后重试');
    }
}

function getFieldIcon(field) {
    const iconMap = {
        '总人数': 'users',
        '正式工总人数': 'user-tie',
        '男女比例': 'venus-mars',
        '平均年龄': 'birthday-cake',
        '平均司龄': 'clock',
        '管理岗人数': 'user-shield',
        '平均汇报深度': 'sitemap',
        '平均管理幅度': 'project-diagram',
        '试用期人数': 'user-clock',
        '党员比例': 'flag',
        '校招生比例': 'graduation-cap',
        '近一年新员工比例': 'user-plus',
        '近一年离职率': 'user-minus',
        '官兵比': 'balance-scale',
        '部门名称': 'building',
        '岗位名称': 'briefcase',
        '职务': 'id-badge',
        '职级': 'layer-group',
        '关键标签': 'tags'
    };
    return iconMap[field] || 'info-circle';
}

function formatValue(value) {
    if (!value && value !== 0) return '<span class="text-muted">-</span>';
    if (typeof value === 'number') {
        return value.toLocaleString('zh-CN', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 2
        });
    }
    return value;
}

function showDiffDetail(diff) {
    document.getElementById('diffLocation').textContent = diff.location || '未知位置';
    document.getElementById('diffDatabase').textContent = diff.database || '未知数据库';
    document.getElementById('diffField').textContent = `${diff.field} (${diff.field_name})`;
    document.getElementById('diffPageValue').textContent = formatValue(diff.page_value);
    document.getElementById('diffDbValue').textContent = formatValue(diff.db_value);
    
    new bootstrap.Modal(document.getElementById('diffDetailModal')).show();
}

function showToast(message) {
    const toastContainer = document.createElement('div');
    toastContainer.style.position = 'fixed';
    toastContainer.style.top = '20px';
    toastContainer.style.right = '20px';
    toastContainer.style.zIndex = '1050';
    
    const toast = document.createElement('div');
    toast.className = 'toast show';
    toast.setAttribute('role', 'alert');
    toast.innerHTML = `
        <div class="toast-header">
            <i class="fas fa-exclamation-circle text-danger me-2"></i>
            <strong class="me-auto">提示</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">${message}</div>
    `;
    
    toastContainer.appendChild(toast);
    document.body.appendChild(toastContainer);
    
    setTimeout(() => {
        toast.remove();
        if (!toastContainer.hasChildNodes()) {
            toastContainer.remove();
        }
    }, 3000);
}
</script>

<style>
.table th {
    background-color: #fafafa;
    font-weight: 500;
    color: rgba(0,0,0,0.85);
    border-bottom: 1px solid #f0f0f0;
    transition: background .3s ease;
}

.table td {
    color: rgba(0,0,0,0.65);
    transition: background .3s ease;
}

.table-hover tbody tr:hover {
    background-color: #fafafa;
}

.badge {
    padding: 4px 8px;
    border-radius: 2px;
    font-weight: normal;
    font-size: 12px;
}

.badge i {
    font-size: 10px;
}

.btn-info {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
}

.btn-info:hover {
    background-color: #40a9ff;
    border-color: #40a9ff;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #40a9ff;
    border-color: #40a9ff;
}

.text-break {
    word-break: break-all;
}

.toast {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
}

.toast-header {
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.modal-content {
    box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
}
</style>
{% endblock %}
